<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./mescroll.min.css">
    <link rel="stylesheet" href="./css/audio.css">
    <script type="text/javascript" src="./jquery1.42.min.js"></script>
    <script src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
    html {
        overflow-x: hidden;
    }

    /* 本例子css */

    body {
        min-height: 2000px;
    }

    .lunbo {
        height: 3.36rem;
        position: relative;
        background: rgb(193, 217, 229);
    }

    .slideBox {
        position: absolute;
        top: 0;
        left: 1.8rem;
        height: 100%;
        /* overflow: hidden; */
        position: relative;
    }

    .slideBox .hd {
        position: absolute;
        bottom: 0;
        padding: 0 2.8rem;
        height: .3rem;
        overflow: hidden;
        position: absolute;
        z-index: 1;
    }

    .slideBox .hd ul {
        overflow: hidden;
        zoom: 1;
        float: left;
    }

    .slideBox .hd ul li {
        float: left;
        margin: 0 .08rem;
        width: .06rem;
        height: .06rem;
        line-height: .3rem;
        text-align: center;
        background: rgb(165, 165, 165);
        cursor: pointer;
        border-radius: 50%;
    }

    .slideBox .hd ul li.on {
        background: #f00;
        color: #fff;
    }

    .slideBox .bd {
        position: relative;
        height: 100%;
        z-index: 0;
    }

    .slideBox .bd li {
        zoom: 1;
        vertical-align: middle;
    }

    .slideBox .bd img {
        width: 7.3rem;
        height: 100%;
        display: block;
    }

    .slideBox .xzkhd {
        position: absolute;
        width: 2.55rem;
        height: 3.37rem;
        top: 0;
        left: 7.29rem;
        overflow: hidden;
        box-shadow: 2px 0px 1px rgba(30, 33, 34, .3);
        /* position: relative; */
    }

    .slideBox .xzkhd img {
        width: 2.55;
        height: auto;

    }

    .slideBox .xt {
        position: absolute;
        top: 2.8rem;
        left: 7.43rem;
    }

    .slideBox .xt ul {
        display: flex;
        width: 100%;
        height: .13rem;
        color: rgb(120, 120, 120);

    }

    .slideBox .xt ul li {
        display: block;
        font-size: .13rem;
        padding-right: .02rem;

    }

    /* 下面是前/后按钮代码，如果不需要删除即可 */

    .slideBox .prev,
    .slideBox .next {
        position: absolute;
        left: -9%;
        top: 50%;
        background: red;
        margin-top: -25px;
        display: block;
        width: .32rem;
        height: .4rem;
        background: url('./image/slider-arrow.png') -110px 5px no-repeat;
        filter: alpha(opacity=50);
        opacity: 0.5;
    }

    .slideBox .next {
        display: block;
        color: red;
        left: 79%;
        /* right: 50%; */
        background-position: 8px 5px;
    }

    .slideBox .prev:hover,
    .slideBox .next:hover {
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .slideBox .prevStop {
        display: none;
    }

    .slideBox .nextStop {
        display: none;
    }






    .slideGroup {
        position: relative;
        width: 690px;
        height: 190px;
        top: 0;
        left: 0;
        /* text-align: left; */
    }

    .slideGroup .slideBox {
        margin-top: .2rem;
        /* margin-right: .2rem; */
        position: absolute;
        position: relative;
        left: 0;
        /* overflow: hidden; */
        zoom: 1;
        padding: 30px 0 20px 15px;
        background: rgb(245, 245, 245);
        position: relative;
    }

    .slideGroup .sPrev,
    .slideGroup .sNext {
        position: absolute;
        left: -5px;
        top: 30px;
        display: block;
        width: 35px;
        height: 94px;
        background: url('./image/icoLeft.gif') center center no-repeat;
        overflow: hidden;
    }

    .slideGroup .sNext {
        left: auto;
        right: 0px;
        background: url('./image/icoRight.gif') center center no-repeat;
    }

    .slideGroup .sPrev:hover,
    .slideGroup .sNext:hover {
        border-color: rgb(220, 220, 220);
    }

    .slideGroup .parBd ul {
        /* position: absolute;
        left: -.2rem; */
        overflow: hidden;
        margin-right: .2rem;

        zoom: 1;
    }

    .slideGroup .parBd ul li {
        margin-left: 10px;
        width: 1.2rem;
        float: left;
        _display: inline;
        /* overflow: hidden; */
        text-align: center;
        position: relative;
    }

    /* .slideGroup .parBd ul li::after{
         content: '';
         position: absolute;
         right: -.15rem;
         top: .1rem;
         background: url('./image/coverall.png')no-repeat;
         width: .15rem;
         height: .6rem;

     } */

    .slideGroup .parBd ul li .pic {
        text-align: center;
        width: 1.2rem;
        position: relative;
    }

    .slideGroup .parBd ul li .pic img {
        width: 99px;
        height: 99px;
        display: block;
        border: 1px solid #ccc;
    }

    .slideGroup .parBd ul li .pic #cd {
        background: url('./image/coverall.png');
        width: 1.18rem;
        height: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        background-position: 0 -570px;
    }




    .slideGroup .parBd ul li .pic a:hover img {
        border-color: #999;
    }

    .slideGroup .parBd ul li .title p {
        font-size: .08rem;
        color: rgb(119, 119, 119);
    }

    .slideGroup .parBd ul li .title p:first-child {
        color: rgb(0, 0, 0);
    }




    /*默认样式，主要是position:fixed实现屏幕绝对定位*/

    #gotoTop {
        display: none;
        position: fixed;
        top: 72%;
        left: 50%;
        cursor: pointer;
        margin-top: -50px;
        margin-left: 520px;
        /* padding: 9px 4px; */
        width: 48px;
        height: 44px;
        text-align: center;

        /* border: 1px solid #e0e0e0; */
        /* background: #fff; */
    }

    #gotoTop .top {
        width: 100%;
        height: 100%;
        background: url('./image/sprite.png')no-repeat;
        background-position: -2.65rem -.47rem;
    }

    /*用CSS表达式(expression)来实现ie6下position:fixed效果*/

    /* #gotoTop {
        _position: absolute;
        _top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")
    } */

    /*鼠标进入的反馈效果*/

    /* #gotoTop .top.hover {
        background: url('./image/sprite.png')no-repeat;
        /* color: #fff;
        text-decoration: none; */

    /* background-position:-3.27rem -.47rem; */

    /* }  */
</style>
</head>

<body>

    <div class="toubu">
        <div class="caidan">
            <span class="logo">
                <a></a>
            </span>
            <ul>
                <li>
                    <a>发现音乐</a>
                </li>
                <li>
                    <a>我的音乐</a>
                </li>
                <li>
                    <a>朋友</a>
                </li>
                <li>
                    <a>商城</a>
                </li>
                <li>
                    <a>音乐人</a>
                </li>
                <li>
                    <a>下载客户端</a>
                </li>
            </ul>
            <div class="hot">
                <a class="iconfont icon-hotchunse"></a>
            </div>
            <div class="sousuo">
                <input type="text" placeholder="音乐/视频/电台/用户">
                <div class="tg">
                    <a class="iconfont icon-shipin"></a>
                    <a>视频投稿</a>
                </div>
                <div class="dl">
                    <a>登录</a>
                </div>
            </div>
            <div class="rightsan">
                <a class="iconfont icon-sanjiaoxing-down"></a>
            </div>
        </div>
        <div class="biao">
            <div class="leftsan">
                <a class="iconfont icon-sanjiaoxing-up"></a>
            </div>
            <ul>
                <li>
                    <a class="tj">
                        <h3>推荐</h3>
                    </a>
                </li>
                <li>
                    <a>
                        <h3>排行榜</h3>
                    </a>
                </li>
                <li>
                    <a>
                        <h3>歌单</h3>
                    </a>
                </li>
                <li>
                    <a>
                        <h3>主播电台</h3>
                    </a>
                </li>
                <li>
                    <a>
                        <h3>歌手</h3>
                    </a>
                </li>
                <li>
                    <a>
                        <h3>新碟上架</h3>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- lunbotu -->
    <div class="lunbo">
        <div id="slideBox" class="slideBox">
            <div class="hd">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="bd">
                <ul>
                    <li>
                        <a>
                            <img src="./image/lunbo1.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo2.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo3.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo4.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo5.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo6.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo7.jpg" />
                        </a>
                    </li>
                    <li>
                        <a>
                            <img src="./image/lunbo8.jpg" />
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 下载客户端 -->
            <div class="xzkhd">
                <a>
                    <img src="./image/download.png" alt="">
                </a>
            </div>
            <div class="xt">
                <ul>
                    <li>PC</li>
                    <li>安卓</li>
                    <li>iPone</li>
                    <li>WP</li>
                    <li>iPad</li>
                    <li>Mac</li>
                    <li>六大客户端</li>
                </ul>
            </div>
            <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
            <a class="prev" href="javascript:void(0)"></a>
            <a class="next" href="javascript:void(0)"></a>
        </div>
    </div>
    <!-- 歌曲 -->
    <div class="gequ">
        <div class="bleft"></div>
        <div class="left">
            <div class="rmtj">
                <div class="title">
                    <a class="iconfont icon-yuan"></a>
                    <span>热门推荐</span>
                    <a>华语</a>|
                    <a>流行</a>|
                    <a>摇滚</a>|
                    <a>民谣</a>|
                    <a>更多</a>
                    <a>电子</a>
                    <a class="iconfont icon-xiangyou"></a>
                </div>
                <ul>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>
                    <li>
                        <img src="./image/109951163473435895.jpg" alt="">
                        <div class="bottom">
                            <a class="iconfont icon-erjiheadphones31"></a>
                            <a>29万</a>
                            <a class="iconfont icon-bofang1"></a>
                        </div>
                        <a>处女座</a>|
                        <a>爱你不完美的完美</a>
                    </li>



                </ul>
            </div>
            <div class="gg">
                <img src="./image/ad.bid.jpg" alt="">
                <a>广告</a>
            </div>
            <div class="xdsj">

                <div class="newtitle">
                    <a class="iconfont icon-yuan"></a>
                    <span>新碟上架</span>
                    <a>更多</a>
                    <a></a>
                    <a class="iconfont icon-xiangyou"></a>
                </div>
                <!-- 碟片 -->

                <div class="slideGroup" style="margin:0 auto">

                    <div class="parBd">

                        <div class="slideBox">
                            <a class="sPrev" href="javascript:void(0)"></a>
                            <ul>
                                <li>
                                    <div class="pic">
                                        <a>
                                            <img src="./image/dp1.jpg" />
                                        </a>
                                        <a id="cd" class "cd"></a>
                                    </div>
                                    <div class="title">
                                        <p>呓象</p>
                                        <p>窦唯/译乐队</p>

                                    </div>



                                </li>
                                <li>
                                    <div class="pic">
                                        <a>
                                            <img src="./image/dp2.jpg" />
                                        </a>
                                        <a id="cd" class "cd"></a>
                                    </div>
                                    <div class="title">
                                        <p>火焰小溪</p>
                                        <p>林宥嘉</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a>
                                            <img src="./image/dp3.jpg" />
                                        </a>
                                        <a id="cd" class "cd"></a>
                                    </div>
                                    <div class="title">
                                        <p>Queen</p>
                                        <p>Nicki Minaj</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a>
                                            <img src="./image/dp4.jpg" />
                                        </a>
                                        <a id="cd" class "cd"></a>
                                    </div>
                                    <div class="title">
                                        <p>Hold Me Down</p>
                                        <p>吴亦凡</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="pic">
                                        <a>
                                            <img src="./image/dp5.jpg" />
                                        </a>
                                        <a id="cd" class "cd"></a>
                                    </div>
                                    <div class="title">
                                        <p>香蜜沉沉烬如霜</p>
                                        <p>群星</p>
                                    </div>
                                </li>


                            </ul>
                            <a class="sNext" href="javascript:void(0)"></a>
                        </div>
                    </div>

                </div>

                <div class="bd">
                    <div class="newtitle">
                        <a class="iconfont icon-yuan"></a>
                        <span>榜单</span>
                        <a>更多</a>
                        <a></a>
                        <a class="iconfont icon-xiangyou"></a>
                    </div>
                    <div class="bangdan">
                        <div class="biaosheng">

                            <div class="bdtitle">
                                <img src="./image/bs.jpg" alt="">
                                <h2>云音乐飙升榜</h2>
                                <div class="bq">
                                    <a class="iconfont icon-bofang1"></a>
                                    <a class="iconfont icon-wangpanxinjianwenjianjia-copy"></a>
                                </div>

                            </div>
                            <ul>
                                <li>
                                    <a>1</a>
                                    <a>China-E</a>
                                </li>
                                <li>
                                    <a>2</a>
                                    <a>宝贝</a>
                                </li>
                                <li>
                                    <a>3</a>
                                    <a>目不转睛</a>
                                </li>
                                <li>
                                    <a>4</a>
                                    <a>某某</a>
                                </li>
                                <li>
                                    <a>5</a>
                                    <a>可一可再</a>
                                </li>
                                <li>
                                    <a>6</a>
                                    <a>有人</a>
                                </li>
                                <li>
                                    <a>7</a>
                                    <a>D-Day</a>
                                </li>
                                <li>
                                    <a>8</a>
                                    <a>来不及勇敢</a>
                                </li>
                                <li>
                                    <a>9</a>
                                    <a>陪我长大</a>
                                </li>
                                <li>
                                    <a>10</a>
                                    <a>目不转睛(live)</a>
                                </li>
                                <li>
                                    <a></a>
                                    <a>查看全部></a>
                                </li>
                            </ul>
                        </div>
                        <div class="xinge">

                            <div class="bdtitle">
                                <img src="./image/xg.jpg" alt="">
                                <h2>云音乐新歌榜</h2>
                                <div class="bq">
                                    <a class="iconfont icon-bofang1"></a>
                                    <a class="iconfont icon-wangpanxinjianwenjianjia-copy"></a>
                                </div>

                            </div>
                            <ul>
                                <li>
                                    <a>1</a>
                                    <a>China-E</a>
                                </li>
                                <li>
                                    <a>2</a>
                                    <a>宝贝</a>
                                </li>
                                <li>
                                    <a>3</a>
                                    <a>目不转睛</a>
                                </li>
                                <li>
                                    <a>4</a>
                                    <a>某某</a>
                                </li>
                                <li>
                                    <a>5</a>
                                    <a>可一可再</a>
                                </li>
                                <li>
                                    <a>6</a>
                                    <a>有人</a>
                                </li>
                                <li>
                                    <a>7</a>
                                    <a>D-Day</a>
                                </li>
                                <li>
                                    <a>8</a>
                                    <a>来不及勇敢</a>
                                </li>
                                <li>
                                    <a>9</a>
                                    <a>陪我长大</a>
                                </li>
                                <li>
                                    <a>10</a>
                                    <a>目不转睛(live)</a>
                                </li>
                                <li>
                                    <a></a>
                                    <a>查看全部></a>
                                </li>
                            </ul>
                        </div>
                        <div class="yuanchuang">

                            <div class="bdtitle">
                                <img src="./image/yc.jpg" alt="">
                                <h2>云音乐原创榜</h2>
                                <div class="bq">
                                    <a class="iconfont icon-bofang1"></a>
                                    <a class="iconfont icon-wangpanxinjianwenjianjia-copy"></a>
                                </div>

                            </div>
                            <ul>
                                <li>
                                    <a>1</a>
                                    <a>China-E</a>
                                </li>
                                <li>
                                    <a>2</a>
                                    <a>宝贝</a>
                                </li>
                                <li>
                                    <a>3</a>
                                    <a>目不转睛</a>
                                </li>
                                <li>
                                    <a>4</a>
                                    <a>某某</a>
                                </li>
                                <li>
                                    <a>5</a>
                                    <a>可一可再</a>
                                </li>
                                <li>
                                    <a>6</a>
                                    <a>有人</a>
                                </li>
                                <li>
                                    <a>7</a>
                                    <a>D-Day</a>
                                </li>
                                <li>
                                    <a>8</a>
                                    <a>来不及勇敢</a>
                                </li>
                                <li>
                                    <a>9</a>
                                    <a>陪我长大</a>
                                </li>
                                <li>
                                    <a>10</a>
                                    <a>目不转睛(live)</a>
                                </li>
                                <li>
                                    <a></a>
                                    <a>查看全部></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>




            </div>
        </div>
        <div class="right">
            <div class="yhdl">
                <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                <div class="yh">
                    <a>用户登录</a>
                </div>
            </div>
            <div class="ruzhu">
                <div class="rz">
                    <a>入住歌手</a>
                    <a>查看更多></a>
                </div>
                <ul>
                    <li>
                        <img src="./image/a1.jpg" alt="">
                        <div class="xm">
                            <a>Fine乐团</a>
                            <br>
                            <a>独立音乐人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/a1.jpg" alt="">
                        <div class="xm">
                            <a>Fine乐团</a>
                            <br>
                            <a>独立音乐人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/a1.jpg" alt="">
                        <div class="xm">
                            <a>Fine乐团</a>
                            <br>
                            <a>独立音乐人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/a1.jpg" alt="">
                        <div class="xm">
                            <a>Fine乐团</a>
                            <br>
                            <a>独立音乐人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/a1.jpg" alt="">
                        <div class="xm">
                            <a>Fine乐团</a>
                            <br>
                            <a>独立音乐人</a>
                        </div>
                    </li>
                </ul>
                <div class="sq">
                    <a>申请成为网易音乐人</a>
                </div>
            </div>
            <div class="zhubo">
                <div class="zb">
                    <a>热门主播</a>
                </div>
                <ul>

                    <li>
                        <img src="./image/b1.jpg" alt="">
                        <div class="zl">
                            <a>DJ艳秋</a>
                            <a class="iconfont icon-v"></a>
                            <br>
                            <a>著名音乐节目主持人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/b1.jpg" alt="">
                        <div class="zl">
                            <a>DJ艳秋</a>
                            <a class="iconfont icon-v"></a>
                            <br>
                            <a>著名音乐节目主持人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/b1.jpg" alt="">
                        <div class="zl">
                            <a>DJ艳秋</a>
                            <a class="iconfont icon-v"></a>
                            <br>
                            <a>著名音乐节目主持人</a>
                        </div>
                    </li>
                    <li>
                        <img src="./image/b1.jpg" alt="">
                        <div class="zl">
                            <a>DJ艳秋</a>
                            <a class="iconfont icon-v"></a>
                            <br>
                            <a>著名音乐节目主持人</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="kb">

            <!-- <a href="javascript:scroll(0,0)">返回顶部</a> -->
            <!-- <a onclick="pageScroll()">返回顶部</a>  -->
            <a id="gotoTop">
                <div class="top"></div>
            </a>

        </div>
    </div>
    <div class="dibu">
        <div class="wy">

            <a>关于网易</a>
            <a>|</a>
            <a>客户服务</a>
            <a>|</a>
            <a>服务条款</a>
            <a>|</a>
            <a>网站导航</a>
            <a>|</a>
            <a>意见反馈</a>
            <br>
            <a>网易公司版权所有©1997-2018</a>
            <a>杭州乐读科技有限公司运营：浙网文[2018]3506-263号</a>
            <br>
            <a>违法和不良信息举报电话：0571-89853516</a>
            <a> 举报邮箱：cloudmusicservice@163.com</a>

        </div>
    </div>
    <div class="audio-box">
        <div class="audio-container">
            <div class="audio-view">
                <div class="audio-cover"></div>
                <div class="audio-body">
                    <h3 class="audio-title">未知歌曲</h3>
                    <div class="audio-backs">
                        <div class="audio-this-time">00:00</div>
                        <a>/</a>
                        <div class="audio-count-time">00:00</div>
                        <div class="audio-setbacks">
                            <i class="audio-this-setbacks">
                                <span class="audio-backs-btn"></span>
                            </i>
                            <span class="audio-cache-setbacks">
                            </span>
                        </div>
                    </div>
                </div>

                <div class="audio-btn">
                    <div class="audio-select">
                        <div class="audio-prev"></div>
                        <div class="audio-play"></div>
                        <div class="audio-next"></div>

                        <div class="audio-volume"></div>
                        <div id="audio-liebiao" class="audio-liebiao"></div>
                        <div class="audio-menu"></div>
                    </div>
                    <div class="audio-set-volume">
                        <div class="volume-box">
                            <i>
                                <span></span>
                            </i>
                        </div>
                    </div>
                    <div class="audio-list">
                        <div class="audio-list-head">
                            <p>播放列表</p>
                            <span class="menu-close">X</span>
                        </div>
                        <div class="gundong">
                            <ul class="audio-inline">
                            </ul>
                        </div>

                    </div>
                </div>
                <div class="scfx">
                    <div class="sc"></div>
                    <div class="fx"></div>
                    <a>|</a>
                </div>
            </div>
        </div>

    </div>

</body>

<script src="./mescroll.min.js"></script>
<script src="./audio.js"></script>
<!-- <script src="./jquery.min.js"></script> -->
<script src="./noframework.waypoints.js"></script>

<script id="jsID" type="text/javascript">
    var ary = location.href.split("&");
    $(".slideBox").slide({ mainCell: ".bd ul", effect: ary[1], autoPlay: ary[2], trigger: ary[3], easing: ary[4], delayTime: ary[5], mouseOverStop: ary[6], pnLoop: ary[7] });
    $(".slideGroup .slideBox").slide({ mainCell: "ul", vis: 5, prevCell: ".sPrev", nextCell: ".sNext", effect: "leftLoop" });


    // 回到顶部
    function gotoTop(min_height) {
        //预定义返回顶部的html代码，它的css样式默认为不显示 
        var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
        //将返回顶部的html代码插入页面上id为page的元素的末尾 
        $("#page").append(gotoTop_html);
        $("#gotoTop").click(//定义返回顶部点击向上滚动的动画 
            function () {
                $('html,body').animate({ scrollTop: 0 }, 700);
            }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现 
                function () { $(this).addClass("hover"); },
                function () {
                    $(this).removeClass("hover");
                });
        //获取页面的最小高度，无传入值则默认为600像素 
        min_height ? min_height = min_height : min_height = 360;
        //为窗口的scroll事件绑定处理函数 
        $(window).scroll(function () {
            //获取窗口的滚动条的垂直位置 
            var s = $(window).scrollTop();
            //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 
            if (s > min_height) {
                $("#gotoTop").fadeIn(100);
            } else {
                $("#gotoTop").fadeOut(200);
            };
        });
    };
    gotoTop();




    // 音乐部分

    var jquery = $.noConflict();
    $(function () {

        var song = [
            {
                'cover': './image/musicbg11.jpg',
                'src': './music/ツナ覚醒.mp3',
                'title': 'ツナ覚醒'
            },
            {
                'cover': './image/bg.jpg',
                'src': './music/Hello Goodbye & Hello.mp3',
                'title': 'Hello Goodbye & Hello'
            },
            {
                'cover': './image/musicbg1.jpg',
                'src': './music/尽管我们手中空无一物.mp3',
                'title': '尽管我们手中空无一物'
            },
            {
                'cover': './image/musicbg2.jpg',
                'src': './music/江上清风游.mp3',
                'title': '江上清风游'
            },
            {
                'cover': './image/musicbg3.jpg',
                'src': './music/China-x.mp3',
                'title': 'China-x'
            }
        ];

        var audioFn = audioPlay({
            song: song,
            autoPlay: true  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
        });

        /* 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放 */
        audioFn.newSong({
            'cover': './image/musicbg4.jpg',
            'src': './music/River Flows in You.mp3',
            'title': 'River Flows in You'
        }, false);

        /* 暂停播放 */
        //audioFn.stopAudio();

        /* 开启播放 */
        //audioFn.playAudio();

        /* 选择歌单中索引为3的曲目(索引是从0开始的)，第二个参数true立即播放该曲目，false则不播放 */
        //audioFn.selectMenu(3,true);

        /* 查看歌单中的曲目 */
        //console.log(audioFn.song);

        /* 当前播放曲目的对象 */
        //console.log(audioFn.audio);
    });
    var index = 0 ;
    var playtype = "sequence" ;
    window.onload = function() {
                var typesele = document.getElementById("mysele") ;
                //select下拉列表的值改变时触发该事件
                typesele.onchange = function() {
                    window.playtype = typesele.value ;
                } ;
                var player = document.getElementById("easyaudio") ;
                player.src = musics[index] ;
                //当前音乐播放完成后触发该事件
                player.onended = function() {
                    //随机播放
                    if(playtype == "random") {
                        //生成一个随机数
                        index = Math.floor(Math.random() * musics.length) ;
                    }
                    //顺序播放
                    else if(playtype == "sequence") {
                        index = index++ % musics.length ;
                    }
                    //单曲循环则最终index不变
                    player.src = musics[index] ;
                    //改变完成后自动播放
                    player.play() ;
                } ;
            } ;

</script>

</html>